<template>
  <view>
    <view class="list_box1">
      <view class="title">{{dataList.title}}</view>
      <view class="list">
        <navigator :url="item.path"
                   hover-click="none"
                   class="item"
                   v-for="(item) in dataList.data"
                   :key="item.name">
          <image :src="item.icon"></image>
          <view class="right">{{item.name}}</view>
        </navigator>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: Object
  }
}
</script>


<style lang="scss">
.list_box1 {
  width: 325 * 2rpx;
  padding: 0 20rpx;
  background-color: #fff;
  margin: 10rpx auto;
  box-shadow: 0px 1px 8px 0px rgba(51, 46, 16 / 13%, 0.2);

  .title {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    font-weight: 900;
  }
  .list {
    .item {
      height: 110rpx;
      display: flex;
      align-items: center;

      image {
        width: 44rpx;
        height: 46rpx;
        margin-right: 26rpx;
      }
      .right {
        flex-grow: 1;
        color: #333;
        height: 110rpx;
        line-height: 110rpx;
        border-bottom: 1rpx solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          content: '';
          width: 12rpx;
          height: 22rpx;
          // background: url('../../static/img/go.png') no-repeat 0 0 / 100% 100%;
        }
      }
    }
  }
}
</style>